<template>
	<div class="changePay" >
        <span class="close" @click="logout"><i class="iconfont icon-tuichudenglu"></i>退出</span>
        <div class="title flex flex-align-center">
           <span>我的店铺</span>
           <div class="search">
                <input type="text" v-model="storeName" placeholder="请输入店铺名字..." />
                <button @click="search">搜索</button>
                <b style="color:red;">汇商须填写mch_id、mch_key，嘉联须填写mch_id，扫呗需填写mch_id，terminalId，accessToken</b>
            </div>
        </div>
        <div class="table_box">
           <table class="titleTable">
                <tr>
                   <th style="width:5%;">序号</th>
                   <th style="width:15%;">店铺名</th>
                   <th style="width:10%;">地址</th>
                   <th style="width:10%;">支付渠道</th>
                   <th style="width:15%;">mchId</th>
                   <th style="width:15%;">mchKey</th>
                   <th style="width:10%;">terminalId</th>
                   <th style="width:10%;">accessToken</th>
                   <th style="width:10%;">操作</th>
                </tr>
            </table>
            <div id="myStoreCon" class="scroll_box">
                <table class="conTable">
                    <tr v-for="(item,ind) in storeArr" :key="ind">
                        <td style="width:5%;">{{(ind+1)+(curPage - 1)*curSize}}</td>
                        <td style="width:15%;">{{item.storeName}}</td>
                        <td style="width:10%;">{{item.address}}</td>
                        <td style="width:10%;">{{channelType[item.channel]}}</td>
                        <td style="width:15%;">{{item.mchId}}</td>
                        <td style="width:15%;">{{item.channel=="HUI_SHANG"?item.mchKey:"无"}}</td>
                        <td style="width:10%;">{{item.channel=="SAO_BEI"?item.terminalId:"无"}}</td>
                        <td style="width:10%;">{{item.channel=="SAO_BEI"?item.accessToken:"无"}}</td>
                        <td style="width:10%;color:blue;cursor:pointer;" @click="doShowUpdate(item)">修改</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="pager flex flex-align-center" id="pager">
            <div class="pagerCon clearfix">
                <div class="pagerBtnBox right">
                    <div class="pagerBtn">
                        <span class="prev flex flex-align-center flex-pack-center left" :class="{havePage:curPage>1}"><i class="el-icon-arrow-left" @click="curPageFn(2)"></i></span>
                        <span class="curPageNumber flex flex-align-center flex-pack-center left">{{curPage}}</span>
                        <span class="next flex flex-align-center flex-pack-center left" :class="{havePage:curPage<sotreInfo.totalPages}"><i class="el-icon-arrow-right" @click="curPageFn(1)"></i></span>
                    </div>
                </div>
                <div class="curPage flex flex-align-center right" v-text="'第'+curPage+'/'+(sotreInfo.totalPages)+'页'"></div>
                <div class="totalPage flex flex-align-center right" v-text="'共' +sotreInfo.totalElements+ '条'"></div>
            </div>
        </div>
        <div class="update-store" v-if="showUpdate" @click="showUpdate = false;">
            <div class="update-store-wrap" @click.stop="">
                <div class="update-item">
                    <span class="spam-item">支付渠道:</span>
                    <el-select v-model="seledChannelVal" placeholder="请选择">
                        <el-option
                        v-for="item in channelTypeArr"
                        :key="item.channelVal"
                        :label="item.channelName"
                        :value="item.channelVal">
                        </el-option>
                    </el-select>
                </div>
                <div v-if="seledChannelVal=='HUI_SHANG'">
                    <div class="update-item">
                        <span class="spam-item">mch_id:</span>
                        <el-input v-model="mchId" placeholder="请输入mch_id"></el-input>
                    </div>
                    <div class="update-item">
                        <span class="spam-item">mch_key:</span>
                        <el-input v-model="mchKey" placeholder="请输入mch_key"></el-input>
                    </div>
                </div>
                <div v-if="seledChannelVal=='SUI_XIN_FU'">
                    <div class="update-item">
                        <span class="spam-item">mch_id:</span>
                        <el-input v-model="mchId" placeholder="请输入mch_id"></el-input>
                    </div>
                </div>
                <div class="update-item" v-if="seledChannelVal=='JL'">
                    <div class="update-item">
                        <span class="spam-item">mch_id:</span>
                        <el-input v-model="mchId" placeholder="请输入mch_id"></el-input>
                    </div>
                    <!-- <span class="spam-item">sign_agentno:</span>
                    <el-input v-model="signAgentno" placeholder="请输入sign_agentno"></el-input> -->
                </div>
                <div v-if="seledChannelVal=='SAO_BEI'">
                    <div class="update-item">
                        <span class="spam-item">mch_id:</span>
                        <el-input v-model="mchId" placeholder="请输入mch_id"></el-input>
                    </div>
                    <div class="update-item">
                        <span class="spam-item">terminalId:</span>
                        <el-input v-model="terminalId" placeholder="terminalId"></el-input>
                    </div>
                    <div class="update-item">
                        <span class="spam-item">accessToken:</span>
                        <el-input v-model="accessToken" placeholder="accessToken"></el-input>
                    </div>
                    <!-- <span class="spam-item">sign_agentno:</span>
                    <el-input v-model="signAgentno" placeholder="请输入sign_agentno"></el-input> -->
                </div>
                <div style="margin-bottom:10px">
                     <span class="spam-item"></span>
                    <el-checkbox v-model="startEnabled">是否默认支付渠道</el-checkbox>
                </div>
                <button @click="updateStore">保存</button>
            </div>
        </div>
	</div>
</template>

<script>
import {BASE_URL_API,BASE_URL} from "./../../urlConfig";
export default {
  	data(){
  		return{
              startEnabled:false,
                mchId:"",
                mchKey:"",
                signAgentno:"",
                terminalId:'',
                accessToken:'',
              seledChannelVal:"",
              channelType:{
                  "HUI_SHANG":"汇商",
                  "JL":"嘉联",
                  "SAO_BEI":"扫呗",
                  "SUI_XIN_FU":"随行付"
              },
              channelTypeArr:[{channelName:"汇商",channelVal:"HUI_SHANG"},{channelName:"随行付",channelVal:"SUI_XIN_FU"}],//{channelName:"嘉联",channelVal:"JL"},{channelName:"扫呗",channelVal:"SAO_BEI"}
            storeName:"",
            curSelItem:{},//当前选择店铺
            showUpdate:false,
            expireTime:new Date().Format("yyyy-MM-dd hh:mm:ss"),
            storeArr:[],
            sotreInfo: {
                totalPages:1,
                totalElements:0,
            },
            curPage:1,//当前页
            curSize:10,//每页条数
            phone:"",
            options: [{
                value: 'ONE',
                label: '一级'
                }, {
                value: 'TWO',
                label: '二级'
                }, {
                value: 'THREE',
                label: '三级'
            }],
            level:{
                ONE:"一级",
                TWO:"二级",
                THREE:"三级"
            },
            levelValue:"ONE",//等级
  		}
  	},
    methods:{
        search(){
            this.$http({
                url: BASE_URL+"v1/call/search-store-pay",
                method: "GET",
                params: {
                    name:this.storeName
                }
            }).then(res => {
                console.log(res);
                this.storeArr = res.data;
                this.sotreInfo.totalElements = res.data ? res.data.length : 0;
                this.sotreInfo.totalPages = 0;
            });
        },
        doShowUpdate(item){
            this.curSelItem=item;
            this.showUpdate=true;
            this.seledChannelVal = item.channel;
            this.mchId = item.mchId?item.mchId:"";
            this.mchKey = item.mchKey?item.mchKey:"";
            this.signAgentno = item.signAgentno?item.signAgentno:"";
            this.terminalId = item.terminalId?item.terminalId:"";
            this.accessToken = item.accessToken?item.accessToken:"";
            this.startEnabled = item.startEnabled?item.startEnabled:false;
        },
        updateStore(){
            // let expTime = new Date(this.expireTime).Format("yyyy-MM-dd hh:mm:ss");
            if(this.mchId==""||String(this.mchId).trim() == ""){
                this.$message({
                    message: "请完整填写信息",
                    type: "error"
                });
                return;
            }
            let data = {
                id:this.curSelItem.id,
                storeId:this.curSelItem.storeId,
                channel:this.seledChannelVal,
                mchId:this.mchId,
                startEnabled:this.startEnabled
            }
            if(this.seledChannelVal == "HUI_SHANG"){
                if(this.mchKey==""||String(this.mchKey).trim() == ""){
                    this.$message({
                        message: "请完整填写信息",
                        type: "error"
                    });
                    return;
                }
                data = Object.assign(data,{
                    mchKey:String(this.mchKey).trim()
                });
            }else if(this.seledChannelVal == "JL"){
                //
            }else if(this.seledChannelVal == "SAO_BEI"){
                if(this.terminalId==""||String(this.terminalId).trim() == ""||this.accessToken==""||String(this.accessToken).trim() == ""){
                    this.$message({
                        message: "请完整填写信息",
                        type: "error"
                    });
                    return;
                }
                data = Object.assign(data,{
                    terminalId:String(this.terminalId).trim(),
                    accessToken:String(this.accessToken).trim()
                });
            }
            this.$http({
                url:BASE_URL+"v1/call/store-pay-merge",
                method:"POST",
                data
            }).then(res=>{
                if(res.status == 200){
                    this.$message({
                        message: res.data,
                        type: "success"
                    });
                    this.showUpdate=false;
                    if(!this.storeName){
                        this.getStoreList();
                    }else{
                        this.search();
                    }
                }else{
                   this.$message({
                        message: res.data.msg,
                        type: "error"
                    }); 
                }
            })
        },
        logout(){
            localStorage.clear();
            sessionStorage.clear();
            this.$router.replace('/login');
        },
        // 获取店铺列表
        getStoreList: function () {
            this.storeArr = [];
            this.$http({
                url:BASE_URL+"v1/call/store-pay",
                // url:BASE_URL+"code/store-pay",
                method:"GET",
                params:{
                    // userName:this.phone,
                    page:this.curPage - 1,
                    size:this.curSize
                }
            }).then((res)=>{
                this.sotreInfo.totalPages    = res.data.totalPages;
                this.sotreInfo.totalElements = res.data.totalElements;
                this.storeArr = res.data.content;
                // for(let i = 0,len = this.storeArr.length;i<len;i++){
                //     //修改tz时间格式，并加8小时
                //     // this.storeArr[i].expireTime = this.storeArr[i].expireTime?new Date(new Date(this.storeArr[i].expireTime).getTime()+8*3600*1000).toISOString().replace(/T/g, '-').replace(/\.[\d]{3}Z/, ''):'-'
                //     this.storeArr[i].expireTime = this.storeArr[i].expireTime?new Date(this.storeArr[i].expireTime).Format("yyyy-MM-dd hh:mm:ss"):"-";
                // }
            }).catch((err)=>{

            })
        },
        //切换页码
        curPageFn(foo){
            if(this.sotreInfo.totalPages<=1){
                return;
            }
            if(foo==2){
                if( this.curPage==1 ){
                    return;
                }
                this.curPage --;
            }else if(foo==1) {
                if( this.curPage==this.sotreInfo.totalPages ){
                    return;
                }
                this.curPage ++;
            }
            console.log( this.curPage)
            this.getStoreList();
        },
    },
    created: function () {
        this.phone = sessionStorage.getItem("phone");
        this.getStoreList();
    },
  	mounted(){
        $(document).ready(()=>{
            if ( $(document).width() <= 768 ) {
                // this.$createScroll('myStoreCon');
            }
        })
  	}
}
</script>
<style lang="scss" scoped>
	@import "./storeChangePay.scss";
</style>
